<template>
	<view class="cu-bar fixed" :style="fatherCss">
		<view class="cu-custom" :style="[{height:CustomBar + 'px'},{opacity:opacity}]">
			<view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
				<view class="action" @tap="BackPage" v-if="isBack">
					<text class="cuIcon-back"></text>
					<slot name="backText"></slot>
				</view>
				<view class="action is-home" v-if="isHome" @click="goHome">
					<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/back-home.png" mode=""></image>
					<slot name="left"></slot>
				</view>

				<view class="content" :style="[{top:StatusBar + 'px'}]">
					<slot name="content"></slot>
				</view>
				<!-- #ifdef APP-PLUS -->
				<view class="action">
					<slot name="right"></slot>
				</view>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar
			};
		},
		name: 'cu-custom',
		computed: {
			style() {
				var StatusBar = this.StatusBar;
				var CustomBar = this.CustomBar;
				var bgImage = this.bgImage;
				// 自定义
				var opacity = this.opacity;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;opacity:${opacity};`;
				if (this.bgImage) {
					style = `${style}background-image:url(${bgImage});`;
				}
				return style
			}
		},
		props: {
			bgColor: {
				type: String,
				default: ''
			},
			isBack: {
				type: [Boolean, String],
				default: false
			},
			isHome: {
				type: [Boolean, String],
				default: false
			},
			opacity: {
				type: String,
				default: ''
			},
			bgImage: {
				type: String,
				default: ''
			},
			fatherCss: {
				type: String,
				default: ''
			}
		},
		methods: {
			BackPage() {
				var length = getCurrentPages().length
				if (length == 1) {
					uni.switchTab({
						url: '/pages/tabBar/home'
					})
					return
				}
				uni.navigateBack({
					delta: 1
				});
			},
			goHome() {
				uni.switchTab({
					url: '/pages/tabBar/home'
				})
			}
		}
	}
</script>

<style>
	.is-home {
		width: 56rpx !important;
		height: 56rpx !important;
		background-color: #ffffff;
		border: solid 1rpx #efefef;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 100%;
	}

	.is-home image {
		width: 36rpx;
		height: 36rpx;
	}

	.bg-ticket-center {
		background: #3080e8;
		color: #fff;
	}

	.distribution-centre-color {
		background: linear-gradient(to right, #f34930, #f7c67c) !important;
		color: #fff !important;
		
	}

	.bg-ambassadors-fans {
		background-image: linear-gradient(-90deg,
			#ff5a29 0%,
			#fe8f65 48%,
			#ff5628 100%) !important;
		color: #fff !important;
		
	}
</style>
